{extend name="public:base" /}
{block name="content"}
<link rel="stylesheet" href="__PUBLIC__/bootstrap-3.3.7-dist/css/img.css">
<style media="screen">
	body {
		background-color: #efeff4
	}

	.card {
		font-size: 14px;
		position: absolute;
		margin-bottom: 10%;
		width: 80%;
		top: 80px;
		left: 50%;
		transform: translate(-50%, 0%);
		overflow: hidden;
		border-radius: 2px;
		background-color: #fff;
		background-clip: padding-box;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
		padding: 10px;
		color: #8f8f94;
		font-weight:bold;
	}
	.card>p>span{
		width: 120px;
		display: inline-block;
	}
	.card .card_title {
		font-size: 20px;
		font-weight: 400;
		text-align: center;
		line-height: 60px;
	}

	.card .title {
		border-left: 2px solid #4ab8ec;
		font-size: 16px;
		line-height: 16px;
		padding-left: 4px;
		margin: 10px 4px;
		color: #000;
	}

</style>

<div class="page-header">
	<h1>
		{$breadcrumb1}
		<small>
			<i class="ace-icon fa fa-angle-double-right"></i>
			{$crumbs}
		</small>
	</h1>
</div>
<div class="row">
	<div class="col-xs-12">
		<div class="panel-body" style="margin-left: 10%">
			<form enctype="multipart/form-data" action="{:url('Free/do_upload')}" method="post">
				<input type="hidden" name="id" value="{$info.id}"  />
				<input type="hidden" name="seq_id" value="{$info.seq_id}"  />
				<div class="addbtn_wrap">
					<input type="button" class="btn btn-primary addbtn" value="点击添加图片">
					<input class="btn btn-primary" type="file" name="image[]" id="file1" style="z-index: 1" onchange="getPhoto(this)">
				</div>
				<!-- 图片上传 -->
				<div class="img_wrap">
				</div>
				<input type="submit" value="提交" style="width:50%;margin-top:20px;" class=" btn btn-primary ">
			</form>
		</div>
	</div>
</div>
{/block}
{block name="javascript"}
<script src="__PUBLIC__/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="__PUBLIC__/bootstrap-3.3.7-dist/js/img.js"></script>
<script src="__PUBLIC__/js/ckeditor/ckeditor.js"></script>
<script>
	/**
	 * Created by Administrator on 2018/5/29.
	 */
	/*预览*/
	var count=1;
	function getPhoto(node) {
		var imgURL = "";
		try{
			var file = null;
			if(node.files && node.files[0] ){
				file = node.files[0];
			}else if(node.files && node.files.item(0)) {
				file = node.files.item(0);
			}

			try{
				imgURL =  file.getAsDataURL();
			}catch(e){
				imgRUL = window.URL.createObjectURL(file);
			}
		}catch(e){
			if (node.files && node.files[0]) {
				var reader = new FileReader();
				reader.onload = function (e) {
					imgURL = e.target.result;
				};
				reader.readAsDataURL(node.files[0]);
			}
		}
		/*动态添加file和对应的图片预览*/
		createPic();
		createFile();
		count++;
		return imgURL;
	}

	/*创建图片预览元素*/
	function createPic() {
		var picText='<div class="pic_wrap" id=" showPic'+count+'" onmouseover="overDelete(this)" onmouseleave="leaveDelete(this)">'+
				'<img  src="'+imgRUL+'"" class="img img-rounded">'+
				'<div class="delete"><img src="__PUBLIC__/bootstrap-3.3.7-dist/images/x.png" onclick="deletePic(this)"></div>'+
				'</div>';
		/*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，不插入预览图*/
		for(var i=0;i< $('input[type=file]').length-1;i++){
			var val= $('input[type=file]').eq(i).val();
			if($('input[type=file]').last().val()==val){
				/*此处不插入图片，就让count回到之前那一步，否则id=file和id=showPic的数据后缀对不上，导致file和图片对应错乱*/
				count=count-1;
				return;
			}
		}
		$('.img_wrap').append(picText);
	}

	/*创建新的file元素*/
	function createFile() {
		var flieText='<input type="file" name="image[]" id="file'+(count+1)+'" style="z-index: '+(count+1)+'" onchange="getPhoto(this)">';
		/*遍历除去最新一个file的所有file，如果有file的值与最后一个file的值相等，提示图片已存在，清空最后一个file*/
		for(var i=0;i< $('input[type=file]').length-1;i++){
			var val= $('input[type=file]').eq(i).val();

			if($('input[type=file]').last().val()==val){
				var file = $('input[type=file]').last();
				file.after(file.clone().val(""));
				file.remove();
				alert("图片已存在！");
				return;
			}
		}
		$('.addbtn_wrap').append(flieText);
		/*图片数量大于1，显示提交按钮，添加一次判断一次*/
		if($('.pic_wrap').length<=0){

			$('input[type=submit]').css('display','none');
		}else {
			$('input[type=submit]').css('display','block');
		}
	}

	/*移入移出，删除遮罩层显示隐藏*/
	function overDelete(obj) {
		$(obj).children('div').show();
	}

	function leaveDelete(obj) {
		$(obj).children('div').hide();
	}

	/*删除图片和对应的file*/
	function deletePic(obj) {
		/*提取图片的id的数字部分*/
		var picId=$(obj).parent().parent().attr('id');
		var picVal= picId.replace(/[^0-9]/ig,"");
		var fileArr=$('input[type=file]');
		/*遍历file，如果图片id的数字部分和file的id的数字部分相同，那么文件与图片是对应的，删除图片的同时删除对应的file*/
		fileArr.each(function () {
			/*提取file的id的数字部分*/
			var fileId=$(this).attr('id');
			var fileVal = fileId.replace(/[^0-9]/ig,"");
			if(fileVal==picVal){
				$(this).remove();
				$(obj).parent().parent().remove();
			}
		});
		/*图片数量大于1，显示提交按钮,删除一次判断一次*/
		if($('.pic_wrap').length<=0){

			$('input[type=submit]').css('display','none');

		}else {
			$('input[type=submit]').css('display','block');
		}
	}
	//删除图片及数据库记录
	$('.delete img').click(function(){
		var id = $(this).attr('data-img');
		$.ajax({
			url:'delImg',
			data:{id:id,model:'contract_b2_img'},
			success: function(data){
				if(data.code == 1){
					$(".pic_wrap").remove();
				}
				alert(data.msg);
			}
		});
	});
</script>
{/block}
